<template>
  <div>
    <input type="text" v-model="message" />
    <h2>{{ message }}</h2>
    <hr />
    <h4>v-model使用原理</h4>
    <input type="text" :value="message2" @input="inputChange" />
    <h2>{{ message2 }}</h2>
    <hr />
    <h4>v-model绑定其他表单</h4>
    <div>1. 自我介绍</div>
    <textarea cols="30" rows="3" v-model="intro"></textarea>
    <p>文本输入框的值: {{ intro }}</p>

    <!-- 2.checkbox单选框（label元素作用是当点击同意协议文本，会自动触发input的点击） -->
    <span>2. </span>
    <label for="agree">
      <!-- id的值需要和label元素for属性的值对应 -->
      <input id="agree" type="checkbox" v-model="isAgree" /> 同意协议
    </label>
    <p>单选框的值: {{ isAgree }}</p>

    <!-- 3.checkbox多选框（多选框的每个表单元素必须添加value属性，并v-model需绑定同一个数组来存多选的值） -->
    <span>3. 爱好: </span>
    <label for="basketball">
      <input id="basketball" type="checkbox" v-model="hobbies" value="basketball" />
      篮球
    </label>
    <label for="football">
      <input id="football" type="checkbox" v-model="hobbies" value="football" />
      足球
    </label>
    <label for="tennis">
      <input id="tennis" type="checkbox" v-model="hobbies" value="tennis" />
      网球
    </label>
    <p>多选框的值: {{ hobbies }}</p>

    <!-- 4.radio（单选按钮的每个表单元素必须添加value属性，并v-model需绑定同一个数组来存单选的值） -->
    <span>4. 性别: </span>
    <label for="male"> <input id="male" type="radio" v-model="gender" value="male" />男 </label>
    <label for="female">
      <input id="female" type="radio" v-model="gender" value="female" />女
    </label>
    <p>单选按钮的值: {{ gender }}</p>

    <!-- 5.select( multiple 按住shift键可支持多选；size:默认展示个数 ) -->
    <span>5. 喜欢的水果: </span>
    <select v-model="fruit" multiple size="2">
      <option value="apple">苹果</option>
      <option value="orange">橘子</option>
      <option value="banana">香蕉</option>
    </select>
    <p>选择的值: {{ fruit }}</p>
    <hr />
    <h2>v-model的修饰符-lazy的使用</h2>
    <input type="text" v-model.lazy="message" />
    <div>{{ message }}</div>
    <hr />
    <h2>v-model的修饰符-number的使用</h2>
    <input type="text" v-model.number="score" />
    <!-- type 查看 score 的类型 -->
    <div>{{ score }}---{{ typeof score }} 类型</div>
    <hr />
    <h2>v-model的修饰符-trim的使用</h2>
    <input type="text" v-model.trim="message" />
    <div>{{ message }}</div>
  </div>
</template>

<!-- <script>
export default {
  name: 'vmodel',
  data() {
    return {
      message: 'Hello World',
      message2: 'vue2',
      // 存表单元素输入的值：
      intro: '自我介绍', // 1.自我介绍
      isAgree: false, // 2.1 同意协议
      hobbies: ['basketball'], // 2.2 爱好
      gender: '', // 3.性别
      fruit: ['orange'], // 4.喜欢的水果
      num: 1,
      score: '90'
    }
  },
  methods: {
    inputChange(event) {
      this.message2 = event.target.value
    }
  }
}
</script> -->
<script setup>
defineOptions({
  name: 'vmodel'
})
import { ref } from 'vue'
const message = ref('Hello World')
const message2 = ref('vue2')
const intro = ref('自我介绍')
const isAgree = ref(false)
const hobbies = ref(['basketball'])
const gender = ref('')
const fruit = ref(['orange'])
const score = ref('90')

const inputChange = (event) => {
  message2.value = event.target.value
}
</script>

<style lang="scss" scoped></style>
